<template>
  <div>
    <div data-v-3f9a8470="" class="search-comp">
      <div
        data-v-79773cfb=""
        data-v-3f9a8470=""
        class="searchBox"
        style="
          position: fixed;
          background: rgb(255, 255, 255);
          z-index: 1001;
          top: 0px;
        "
      >
        <div data-v-79773cfb="" class="center pc-SearchBar-center">
          <input
            type="text"
            placeholder="请输入药品、症状、品牌"
            v-model="intmsg"
          />
          <i data-v-79773cfb="" class="right"
            ><img
              @click="intmsg = ''"
              data-v-79773cfb=""
              src="https://images.yaodouwang.com/img/common/close.png"
              alt="关闭"
          /></i>
          <span data-v-79773cfb="" @click="historyAdd(intmsg)">{{
            intmsg ? "搜索" : "取消"
          }}</span>
        </div>
      </div>
      <!-- 这里是搜索时的界面 -->
      <div v-if="isSearch">
        <div data-v-3f9a8470="">
          <div data-v-53e7f0f3="" data-v-3f9a8470="" class="his_recode">
            <div
              data-v-53e7f0f3=""
              class="hisortBar"
              v-if="historylist.length > 0"
            >
              <span data-v-53e7f0f3="" class="history">历史记录</span>
              <i data-v-53e7f0f3="" class="empty" @click="handleDelHist"
                ><img
                  data-v-53e7f0f3=""
                  src="https://images.yaodouwang.com/img/common/empty.png"
                  alt="删除"
              /></i>
            </div>
            <div data-v-53e7f0f3="" class="hiscontent">
              <ul data-v-53e7f0f3="" class="clearfix">
                <li
                  @click="getSearchGoodList(hist)"
                  data-v-53e7f0f3=""
                  v-for="(hist, index) in historylist"
                  :key="index"
                >
                  {{ hist }}
                </li>
              </ul>
            </div>
          </div>
          <div data-v-3f9a8470="" class="divider-line"></div>
        </div>
        <div data-v-3f9a8470="" style="margin-top: 0px">
          <div data-v-52c43006="" data-v-3f9a8470="" class="his_recode">
            <div data-v-52c43006="" class="popular-box">
              <span data-v-52c43006="" class="history">搜索发现</span>
            </div>
            <div data-v-52c43006="" class="hiscontent pc-popular-hiscontent">
              <ul data-v-52c43006="" class="clearfix">
                <li
                  v-for="(good, index) in searchList"
                  @click="getSearchGoodList(good.popularName)"
                  :key="good.popularName + index"
                  data-v-52c43006=""
                  class="one-txt-cut"
                >
                  {{ good.popularName }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <!-- 这里是搜索后出现数据的界面 -->
      <div v-else>
        <div data-v-3f9a8470="" style="" class="content">
          <div data-v-3f9a8470="" class="searchResult">
            <div data-v-3f9a8470="" class="hiscontent pc-seach-hiscontent">
              <div
                data-v-3f9a8470=""
                class="sort-btn color-333 font-px28"
                style="top: 86px"
              >
                <div
                  @click="handleRank(0)"
                  data-v-3f9a8470=""
                  :class="{ 'sort-btn-active': rankActiveNum == 0 }"
                >
                  默认
                </div>
                <div
                  @click="handleRank(1)"
                  data-v-3f9a8470=""
                  :class="{ 'sort-btn-active': rankActiveNum == 1 }"
                >
                  销量
                </div>
                <div
                  @click="handleRank(2)"
                  data-v-3f9a8470=""
                  :class="{ 'sort-btn-active': rankActiveNum == 2 }"
                >
                  <div data-v-3f9a8470="" class="sort-btn-price">
                    <div data-v-3f9a8470="">价格</div>
                    <div data-v-3f9a8470="" class="sort-btn-sanjiao">
                      <i
                        data-v-3f9a8470=""
                        :class="[
                          'iconfont',
                          'icon-sanjiaoshang',
                          { 'price-active': pricecount && rankActiveNum == 2 },
                        ]"
                      ></i>
                      <i
                        data-v-3f9a8470=""
                        :class="[
                          'iconfont',
                          'icon-sanjiaoxia',
                          { 'price-active': !pricecount && rankActiveNum == 2 },
                        ]"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 是否使用药神卡 -->
              <div data-v-3f9a8470="" class="is-ysk" style="display: none">
                <button
                  data-v-3f9a8470=""
                  class="is-ysk-button"
                  style="display: none"
                >
                  点击筛选<span data-v-3f9a8470="" class="is-ysk-button_text"
                    >药神卡</span
                  >可用商品
                </button>
                <button
                  data-v-3f9a8470=""
                  class="is-ysk-button2"
                  style="display: none"
                >
                  <span data-v-3f9a8470="">以下是药神卡可用商品</span
                  ><span data-v-3f9a8470="" class="is-ysk-button_text"
                    >取消</span
                  >
                </button>
              </div>
              <!--这里是搜索出来商品的列表  -->
              <div data-v-3f9a8470="" class="details product-detail">
                <div
                  data-v-3f9a8470=""
                  class="product-box"
                  v-if="products.length"
                >
                  <div
                  @click="linkToDetail(product.productId)"
                    v-for="product in products"
                    :key="product.productId"
                    data-v-ca898616=""
                    data-v-3f9a8470=""
                    class="item-container"
                  >
                    <div data-v-ca898616="" class="item-img">
                      <!---->
                      <img data-v-ca898616="" :src="product.imageUrl" alt="" />
                      <!---->
                      <!---->
                      <!---->
                    </div>
                    <div data-v-ca898616="" class="item-info">
                      <div data-v-ca898616="" class="item-info-top">
                        <p
                          data-v-ca898616=""
                          class="item-info-name color-333 font-px26 txt-cut"
                        >
                          {{ product.productName }}
                        </p>
                      </div>
                      <div data-v-ca898616="" class="item-info-price">
                        <p
                          data-v-ca898616=""
                          class="item-info-size color-999 font-px22 one-txt-cut"
                        >
                          {{ product.productSize }}
                        </p>
                      </div>
                      <div data-v-ca898616="" class="item-info-price">
                        <!---->
                        <!---->
                        <p
                          data-v-ca898616=""
                          class="font-px20 color-FF7900 quan"
                        >
                          券
                        </p>
                        <!---->
                        <!---->
                      </div>
                      <div
                        data-v-ca898616=""
                        class="item-info-price add-cart"
                        style="padding-top: 0px"
                      >
                        <div
                          data-v-d4462b7e=""
                          data-v-ca898616=""
                          class="money_show"
                          fontcolor="#FF7900"
                        >
                          <span data-v-d4462b7e="" class="now_money"
                            ><span data-v-d4462b7e=""
                              ><span data-v-d4462b7e="" class="font-px28"
                                >¥</span
                              ><span data-v-d4462b7e="" class="font-px38"
                                >{{ parseInt(product.price)
                                }}<span data-v-d4462b7e="" class="font-px26"
                                  >.{{ handlePrice(product.price) }}</span
                                ></span
                              ></span
                            ></span
                          >
                        </div>
                        <div
                        @click.stop="handleCartAdd(product)"
                          data-v-20b415c4=""
                          data-v-ca898616=""
                          class="cart-icon"
                        >
                          <img
                            data-v-20b415c4=""
                            src=""
                            alt="加购物车"
                          />
                        </div>
                      </div>
                      <div data-v-ca898616="" class="item-info-store">
                        <div
                          data-v-ca898616=""
                          class="item-info-store-left one-txt-cut"
                        >
                          <img
                            data-v-ca898616=""
                            src=""
                            alt=""
                            class="store-icon"
                          />
                          <p
                            data-v-ca898616=""
                            class="store-name color-999 font-px22 one-txt-cut"
                          >
                            {{ product.merchantName }}
                          </p>
                          <img
                            data-v-ca898616=""
                            src=""
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!---->
              <!-- 这里是推荐商品的列表 -->
              <div data-v-3f9a8470="" class="details">
                <!-- 如果没有找到商品出现这个 -->
                <div
                  v-if="products.length == 0"
                  data-v-3f9a8470=""
                  class="product-none"
                >
                  <img
                    data-v-3f9a8470=""
                    src="../assets/img/deng.png"
                    alt=""
                    class="icon"
                  />
                  <p data-v-3f9a8470="" class="product-none">
                    抱歉，没有找到商品，以下商品可能会帮到您
                  </p>
                </div>
                <p
                  v-if="recommendProducts"
                  data-v-3f9a8470=""
                  class="recommend-product product-recommend"
                >
                  以下商品可能会帮到您～
                </p>
                <!---->
                <div data-v-3f9a8470="" class="product-box">
                  <div
                  @click="linkToDetail(prod.productId)"
                    v-for="prod in recommendProducts"
                    :key="prod.productId + prod.kc"
                    data-v-ca898616=""
                    data-v-3f9a8470=""
                    class="item-container"
                  >
                    <div data-v-ca898616="" class="item-img">
                      <!---->
                      <img data-v-ca898616="" :src="prod.imageUrl" alt="" />
                      <!---->
                      <!---->
                      <!---->
                    </div>
                    <div data-v-ca898616="" class="item-info">
                      <div data-v-ca898616="" class="item-info-top">
                        <p
                          data-v-ca898616=""
                          class="item-info-name color-333 font-px26 txt-cut"
                        >
                          {{ prod.productName }}
                        </p>
                      </div>
                      <div data-v-ca898616="" class="item-info-price">
                        <p
                          data-v-ca898616=""
                          class="item-info-size color-999 font-px22 one-txt-cut"
                        >
                          {{ prod.productSize }}
                        </p>
                      </div>
                      <div data-v-ca898616="" class="item-info-price">
                        <!---->
                        <!---->
                        <p
                          data-v-ca898616=""
                          class="font-px20 color-FF7900 quan"
                        >
                          券
                        </p>
                        <!---->
                        <!---->
                      </div>
                      <div
                        data-v-ca898616=""
                        class="item-info-price add-cart"
                        style="padding-top: 0px"
                      >
                        <div
                          data-v-d4462b7e=""
                          data-v-ca898616=""
                          class="money_show"
                          fontcolor="#FF7900"
                        >
                          <span data-v-d4462b7e="" class="now_money"
                            ><span data-v-d4462b7e=""
                              ><span data-v-d4462b7e="" class="font-px28"
                                >¥</span
                              ><span data-v-d4462b7e="" class="font-px38"
                                >{{ parseInt(prod.price)
                                }}<span data-v-d4462b7e="" class="font-px26"
                                  >.{{ handlePrice(prod.price) }}</span
                                ></span
                              ></span
                            ></span
                          >
                        </div>
                        <div
                        @click.stop='handleCartAdd(prod)'
                          data-v-20b415c4=""
                          data-v-ca898616=""
                          class="cart-icon"
                        >
                          <img
                            data-v-20b415c4=""
                            src=""
                            alt="加购物车"
                          />
                        </div>
                      </div>
                      <div data-v-ca898616="" class="item-info-store">
                        <div
                          data-v-ca898616=""
                          class="item-info-store-left one-txt-cut"
                        >
                          <img
                            data-v-ca898616=""
                            src=""
                            alt=""
                            class="store-icon"
                          />
                          <p
                            data-v-ca898616=""
                            class="store-name color-999 font-px22 one-txt-cut"
                          >
                            {{ prod.merchantName }}
                          </p>
                          <img
                            data-v-ca898616=""
                            src=""
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <!---->
                </div>
              </div>
            </div>
          </div>
        </div>
        <router-link data-v-3f9a8470="" class="shopCart" tag="div" to="/cart">
          <div data-v-3f9a8470="" class="shopCart-num1" v-if="countTotal.countQuantity>0">{{countTotal.countQuantity}}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchList,
  searchGoodList,
  defaultOrSalesList,
  priceRankList,
} from "../api/pjmedicinecardsearch";
import {cartAdd} from "../api/pjmedicinecard";
import {ownCartList} from "../api/pjmedicinecart"
export default {
  data() {
    return {
      intmsg: "",
      isCancel: true, //搜索框是否聚焦
      searchList: [], //搜索发现的数据
      isSearch: true, //判断是不是搜索页面
      products: [], //搜索后商品的数据
      recommendProducts: [], //以下商品可能会帮到你的数据
      havegood: true, //是否有上架商品
      rankActiveNum: 0, //默认/销量/价格的激活效果
      pricecount: false, //价格的点击--true低到高  false高到低
      salesTotal: "N", //N按照默认排序  Y按照销量排序
      oldUrl:"" //上一个页面的路径
    };
  },
  computed: {
    historylist() {
      return this.$store.state.medicinecard.historylist;
    },
    countTotal() {
      //总计
      return this.$store.getters["pjcart/countTotal"];
    },
  },
  methods: {
    historyAdd() {
      //点击搜索或者取消 添加历史记录
      if (this.intmsg) {
        this.isSearch = false;
        this.rankActiveNum = 0;
        searchGoodList(this.intmsg).then((res) => {
          this.products = res.data.data.products;
          this.recommendProducts = res.data.data.recommendProducts;
        });
      }
      if (this.historylist) {
        for (let i = 0; i < this.historylist.length; i++) {
          if (this.historylist[i] == this.intmsg) {
            //有相同数据
            return false;
          }
        }
        // 没有相同数据时
        if (this.intmsg) {
          //有关键词时
          this.$store.commit("medicinecard/historyAdd", this.intmsg); //触发store状态机的mutations  commit固定写法
          localStorage.setItem("historylist", JSON.stringify(this.historylist));
          // this.$router.push('/search');
        } else {
          this.isSearch = true;
          this.$router.push(`${this.oldUrl}`);
        }
      }
    },
    handleDelHist() {
      //删除历史记录
      localStorage.setItem("historylist", []);
      this.$store.commit("medicinecard/handleDelHist");
    },
    getSearchGoodList(infkey) {
      //搜索关键词得到数据

      this.handleKey(infkey);
      this.isCancel = !this.isCancel;
      searchGoodList(infkey).then((res) => {
        this.products = res.data.data.products;
        this.recommendProducts = res.data.data.recommendProducts;
      });
    },
    handleKey(infkey) {
      //点击历史记录或者搜索发现跳转到具体的页面
      this.intmsg = infkey;
      this.isSearch = false;
      this.historyAdd();
    },
    handleRank(rankLV1) {
      //点击默认/销量/价格的排序
      this.rankActiveNum = rankLV1;
      document.documentElement.scrollTop = 0;
      let keyword = this.intmsg;
      if (rankLV1 == 2) {
        //点击的价格
        this.pricecount = !this.pricecount;
        document.documentElement.scrollTop = 0;
        let isAscending = this.pricecount ? "N" : "Y"; //赋值价格的排序方式  N:低到高
        priceRankList({ keyword, isAscending }).then((res) => {
          this.products = res.data.data.products;
          this.recommendProducts = res.data.data.recommendProducts;
        });
      } else {
        this.salesTotal = rankLV1 == 0 ? "Y" : "N";
        let type = this.salesTotal;
        defaultOrSalesList({ keyword, type }).then((res) => {
          this.products = res.data.data.products;
          this.recommendProducts = res.data.data.recommendProducts;
        });
      }
    },
    handlePrice(price) {
      //处理价格的函数
      price = price * 100;
      price = parseInt(price) + "";
      price = price.slice(-2);
      return price;
    },
    handleCartAdd(good) {
      //商品加入购物车
      if (this.$store.state.zlstore.userinfo) {
        let productObj = {
          cartAddVos: [{ productId: good.productId, quantity: 1 }],
          isBuy: false,
        };
        cartAdd(productObj).then((res) => {
          ownCartList().then((res) => {
            this.$toast.success("已加入购物车成功");
            //发起请求购物车里面的商品列表
            if(res.data.supplierList){
              var supplierList = res.data.supplierList;
            }
            this.$store.commit("pjcart/initSupplierList", supplierList);
          });
        });
      }else {
        this.$toast.fail("请登录");
      }
    },
    linkToDetail(id) {
      this.$router.push("/children/detail/" + id);
    }, //跳转详情页
  },
  mounted () {
    this.$store.commit("medicinecard/initSearchKey",'');
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.oldUrl=from.path;
    });
  },
  created() {
    searchList().then((res) => {
      this.searchList = res.data.data;
    });
    let infkey=this.$store.state.medicinecard.searchKey;//首页的热搜词
    if(infkey){
      this.isSearch=false;
        searchGoodList(infkey).then((res) => {
        this.products = res.data.data.products;
        this.recommendProducts = res.data.data.recommendProducts;
        this.intmsg=infkey;
      });
    }
  },
  watch: {
    $route: function (to, from) {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/ydapp.css");
@import url("../assets/css/ydgj.css");
.center {
  position: fixed;
  padding: 0.1rem 0;
  width: 100%;
  z-index: 999;
  background: #fff;
}
.center input {
  width: 100%;
  border-radius: 5rem;
  display: block;
  height: 0.66rem;
  padding: 2px 60px 0;
  line-height: 4.66rem;
  background: url(https://images.yaodouwang.com/img/common/search.png) no-repeat
    20px 21px;
  background-color: #f7f7f7;
  color: #666;
  margin-left: 30px;
  width: 599px;
  font-size: 26px;
}
.empty { 
  float: right;
  margin-right: 5px;
  margin-top: 0px;
}
</style>